Picture Text Overlay Experiment

Be Open

... just attending to the now,
with no purpose,
no method,
nothing to attain ...

No Goals!</span>

How to put words on top of an image in ZhurnalyWiki, to make an æsthetic "card" for inspiration and mindfulness? There seem to be several ways. One uses a background image in an HTML table (but this is not supported in HTML 5, and may fail some day soon?), e.g.:

&lt;html&gt;
&lt;table width="160" height="320" background="http://zhurnaly.com/images/running/graffiti_z_2018-02-04_t.jpg"&gt;
&lt;tr&gt;
&lt;td valign="center" align="center"&gt;
&lt;p&gt;&lt;font color="#ffffff"&gt;
&lt;b&gt;This is &lt;br /&gt; &lt;br /&gt; a test!&lt;/b&gt;
&lt;/font&gt;&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/html&gt;

... another way could declare that in a CSS, followed by a ZhurnalyWiki (Oddmuse) table, e.g.:

&lt;html&gt;
&lt;style&gt;
table.user { background-image: url("http://zhurnaly.com/images/running/graffiti_z_2018-02-04_t.jpg"); color: white; font-size: x-large; text-align: center; }
&lt;/style&gt;
&lt;/html&gt;
| ** \\ \\ this is \\ \\ a test ** |

... and, from [1], another way is via CSS and image styling ... and another way is using special features of the Oddmuse wiki "Image Extension" ...

So what to do? Something simple that seems to work, as adapted from the above CSS image-text-overlay method (via an example in [2]), produces the "card" at the top of this page. It uses this CSS:

&lt;html&gt;
&lt;style&gt;
#poemMantraExperiment {
    position: relative; 
    width:480px;
    color: #ffffff;
}
#poemMantraExperiment img {
    width:480px;
}
#poemMantraExperiment div {
    position: absolute; 
    width: 480px; 
}
.title {
    top:20px;
    width:100%;
    text-align:center;
    font-size:xx-large;
    font-weight:bold;
}
.poem {
    bottom:30px;
    left:20px;
    text-align:left;
    font-size:medium;
}
.mantra {
    bottom:30px;
    text-align:right;
    font-style:italic;
    font-size:large;
}
&lt;/style&gt;
&lt;/html&gt;

and this HTML:

&lt;html&gt;
&lt;div id="poemMantraExperiment"&gt;
    &lt;img class="poemMantraImgExperiment" src="http://zhurnaly.com/images/Birds_Kennedy_Center_Terrace_Sunset.jpg_t.jpg"&gt;
    &lt;div class="title"&gt;&lt;span&gt;Be Open&lt;/span&gt;&lt;/div&gt;
    &lt;div class="poem"&gt;&lt;span&gt;
... just attending to the now,&lt;br /&gt;
with no purpose,&lt;br /&gt;
no method,&lt;br /&gt;
nothing to attain ...
&lt;/span&gt;&lt;/div&gt;
    &lt;div class="mantra"&gt;&lt;span&gt;No Goals!&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;                  
&lt;/div&gt;
&lt;/html&gt;

... rather promising!

^z - 2018-04-17